<template>
	<pageFlip @dynamicPageNumber='dynamicPageNumber'>
		<view class="magazine-page" v-for="item in images" :style="`background-image: url(${item.url});background-position:center center;background-repeat:no-repeat;background-size:cover;background-attachment: fixed;`">
			
		</view>
		<!-- <view class="magazine-page" >
			 <div style="background-color: black;width: 300px;height: 100%;">
			 </div>
		</view>
		<view class="magazine-page" style="background: #ff7096;">
			3
		</view>
		<view class="magazine-page" style="background: #ff5c8a;">
			4
		</view>
		<view class="magazine-page" style="background: #6d597a;">
			5
		</view> -->
	</pageFlip>
</template>
<script>
	// #ifdef H5 
	import pageFlip from '../../components/page-flip/page-flip.vue';
	export default {
		components: {
			pageFlip
		},
		data() {
			return {
				page: 1,
				images:[
					{url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2022%252F0509%252F3eeaab49j00rbkp1j001cc000hs00vnc.jpg%26thumbnail%3D660x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670073707&t=03272e957659ba29ce41f295f3bf168d'},
					{url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.itc.cn%2Fq_70%2Fimages01%2F20210428%2F005c2431854947b1a980bd07657328b0.jpeg&refer=http%3A%2F%2Fp6.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670073832&t=c8536cffffbf2cc41282d8dc76e5c222'},
					{url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg13.51tietu.net%2Fpic%2F20200124%2Fray231amyoqray231amyoq.jpg&refer=http%3A%2F%2Fimg13.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670074163&t=d3572901a53e902d5a6e4202ffc8c1b0'},
					{url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.tt98.com%2Fedpic%2Ffa%2F09%2F16%2Ffa09162840e4b2dc91235baff2d0a8cd.jpg&refer=http%3A%2F%2Fup.tt98.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670074163&t=469be35098e8f5d2acb915c3564f7ed9'},
					{url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2Fe%2Fc2%2F8fed8ff33a.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670074163&t=5f95be0cf0af8341ec945a381f252c8f'},
					{url:'https://img0.baidu.com/it/u=3070605033,3222381492&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422'},
					{url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile.moyublog.com%2Fd%2Ffile%2F2021-01-10%2F6e4c47c5ced60fb720667c4d12cb3cbc.jpg&refer=http%3A%2F%2Ffile.moyublog.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670074168&t=6944d053fdcf24a9379a75b16d00e8fe'},
				]
			}
		},
		methods: {
			dynamicPageNumber(pageNumber) {
				this.page = pageNumber;
			}
		},
		watch: {
			page(oldPage, newPage) {
				console.log(oldPage, ' or ', newPage); // 当前页码与上一次的页码，可用触发相对应的事件
			}
		}
	}
	// #endif
</script>
